<template>
	<view class="page_scroll_view">
		<tn-navbar fixed :bottom-shadow="false">{{map[query.app_type]}}申请</tn-navbar>
		<tn-sticky class="tn-white_bg">
			<tn-subsection v-model="subsectionValue" size="lg" radius="0" @change="getLeaveByStatus">
				<tn-subsection-item :title="item.text" v-for="(item,index) in statusType" :key="index" />
			</tn-subsection>
		</tn-sticky>
		<loading v-if="isLoading" style="height: 85vh;"></loading>
		<view class="empty" v-else-if="leaveLogs.length==0">
			<image
				src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
				mode="widthFix"></image>
			<text>这里空空荡荡，啥也没有留下</text>
		</view>
		<scroll-view scroll-y="true" v-else>
			<view class="tn-flex tn-flex-column tn-flex-center tn-p-sm">
				<view class="tn-radius card_item tn-p-sm tn-w-full" v-for="item in leaveLogs" :key="item.id"
					@click="goapplyDetailPage(item)">
					<view class="tn-flex items-center">
						<tn-title :title="item.app_name" mode="hLine" assist-color="tn-blue" size="lg" />
						<tn-icon name="pushpin-fill" type="primary" class="tn-ml-xs" offset-top="-2rpx" />
					</view>
					<view class="tn-flex tn-flex-column justify-around tn-mt-sm">
						<image :src="setImage(item.status)" mode="widthFix" class="status_img"></image>
						<template v-if="query.app_type!=='sale'">
							<text class="tn-mt-xs">
								<text>主体名称：</text>
								<text class="tn-text-sm">{{item.app_main}}</text>
							</text>
						</template>
						<template v-else>
							<text class="tn-mt-xs">
								<text>主体人员：</text>
								<text class="tn-text-sm">{{item.app_contact}}</text>
							</text>
						</template>
						<text class="tn-mt-xs">
							<text>申请人员：</text>
							<text class="tn-text-sm">{{item.user_name}}</text>
						</text>
						<text class="tn-mt-xs">
							<text>联系电话：</text>
							<text class="tn-text-sm">{{item.app_phone}}</text>
						</text>
						<text class="tn-mt-xs">
							<text>申请时间：</text>
							<text class="tn-text-sm">{{item.add_time}}</text>
						</text>
					</view>
					<view class="tn-flex justify-end items-center tn-pt-sm tn-mt-sm tn-border-top tn-gray-light_border">
						<text class="tn-mr-xs tn-text-xs tn-type-info_text">查看详情</text>
						<tn-icon name="right" size="26" offset-top="1px" />
					</view>
				</view>
				<view class="tn-flex-center tn-mb-xs tn-w-full">
					<uni-pagination :total="total" :current="query.page" :pageSize="query.limit" @change="changePage" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		getApplyListApi
	} from "@/request/worktop/index.js"
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"

	onShow(() => {
		getApplyList()
	})
	onLoad((e) => {
		query.value.app_type = e.app_type
	})

	const map = {
		'seller': '商家',
		'delivery': '配送',
		'sale': '销售'
	}
	const isLoading = ref(true)
	const leaveLogs = ref([])
	const subsectionValue = ref(0)
	const total = ref(0)
	const query = ref({
		page: 1,
		limit: 10,
		keyword: '',
		status: '1',
		app_type: ''
	})
	const statusType = [{
		text: '待审核',
		value: '1'
	}, {
		text: '已通过',
		value: '5'
	}, {
		text: '已驳回',
		value: '4'
	}]

	// 获取申请列表
	const getApplyList = () => {
		isLoading.value = true
		getApplyListApi(query.value).then(res => {
			if (res.code == 0) {
				leaveLogs.value = res.data
				total.value = res.other.total
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 更新页码
	const changePage = (e) => {
		query.value.page = e.current
		getApplyList()
	}
	// 设置状态背景
	const setImage = (status) => {
		if (status == 1)
			return 'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/10/40d99534-5b45-4b54-b6a2-8dcbff29a1a53d6ac6f11f07e4267ddbf5ca4b588e43.png'
		if (status == 5)
			return 'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/10/3f606aae-bd94-47c4-9037-083f8a76140b0bfa8894d9964a401ba86b8ad0b0dcc3.png'
		if (status == 4)
			return 'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/10/fcc77805-9cb9-459f-8e2e-35851d2fc67000e89b41ac938c456c67b816756a14cd.png'
	}
	// 切换类型
	const getLeaveByStatus = (index) => {
		query.value.status = statusType[index].value
		getApplyList()
	}
	// 跳转详情
	const goapplyDetailPage = (item) => {
		let obj = {
			item,
			app_type: query.value.app_type
		}
		uni.navigateTo({
			url: '/pages_worktop/applyDetail/applyDetail?obj=' + encodeURIComponent(JSON.stringify(obj))
		})
	}
</script>

<style scoped lang="scss">
</style>